<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>四海金融四周年庆送话费啦</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="${ctxStatic}/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <style>
        body{
            margin:0px;
            padding:0px;
            color: #ffffff;
            background: #FFA423;
        }
        ul{
            margin: 0px 0px 0px 5px;
            padding: 0px;
        }
        li{
            list-style: none;
            margin: 0px;
        }
        div#bgDiv{
            background: #FFA423;
        }
        div#bgDiv > img {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0px;
            right: 0px;
            height: 100%;
            width: 100%;
            border: 0;
            z-index: -999;
        }
        .logo{
            position: absolute;
            top: 5px;
            left: 5px;
            height: 26px;
            width: 150px;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .btn-playLink {
            color: #ffffff;
            background-color: #FF2F2F;
            border-color: #FF2F2F;
            border-radius: 0px;
            font-size: 18px;
            padding: 16px 12px;
            width: 50%;
            float: left;
        }
        .btn-contactLink {
            color: #ffffff;
            background-color: #9B0A0A;
            border-color: #9B0A0A;
            border-radius: 0px;
            font-size: 18px;
            padding: 16px 12px;
            width: 50%;
            float: right;
        }
        .btn-share {
            color: #ffffff;
            background-color: #9B0A0A;
            border-color: #9B0A0A;
            font-size: 18px;
            padding: 10px 12px;
            width: 80%;
        }
        .btn-enjoin {
            color: #ffffff;
            font-weight: bold;
            background-color: #9B0A0A;
            border-color: #9B0A0A;
            font-size: 18px;
            padding: 10px 12px;
            width: 80%;
        }
        .content {
            margin: 0 auto;
            margin-top: 75%;
        }
        .rule{
            color: #ffffff;
            border: 6px solid #9e3812;
            width: 90%;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 20px;
            border-radius: 20px;
            background-color: #8f2904;
        }
        .friends{
            color: #ffffff;
            border: 6px solid #9e3812;
            width: 90%;
            margin: 0 auto;
            margin-top: 20px;
            border-radius: 20px;
            background-color: #8f2904;
        }
        .friendList {
            max-height: 160px;
            overflow-y: scroll;
        }
        .friendList ul>li{
            height: 36px;
        }
        .friendList ul>li>img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .money {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-weight: bold;
            font-size: 16px;
            padding: 0 5px 0 5px;
            color: #FFA423;
        }
        .modal-header {
            background: #9B0A0A;
            padding: 10px 5px 10px 5px;
            color: #FFFFFF;
            font-weight: bold;
        }
        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }
        .modal-content {
            margin: 0 auto;
            margin-top: 30%;
            width: 98%;
            color:#000000;
        }
        .modal-body {
            padding: 10px;
        }
        .modal-footer {
            padding: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="bgDiv">
        <img src="${ctxStatic}/images/wechat/sihai/bg_2.png" />
        <div class="logo">
            <img src="${ctxStatic}/images/wechat/sihai/logo.png" width="100%" height="100%"/>
        </div>
        <div class="content">
            <div class="joinDiv" style="display: none;">
                <div class="progress" style="width: 80%;margin: 0 auto;height: 40px;">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                        <div style="margin-top: 10px;font-size: 20px;" id="money"></div>
                    </div>
                </div>
                <div style="margin-top: 15px;margin-bottom:15px;text-align: center;">
                    <a href="#" class="btn btn-share" id="shareBtn">邀请好友来帮忙赢话费</a>
                </div>
                <div style="margin-top: 15px;margin-bottom:15px;text-align: center;">
                    <a href="#" class="btn btn-share" id="crowBtn">帮"${nickname}"赢话费</a>
                </div>
            </div>
            <div class="notJoinDiv" style="display: block;">
                <div style="margin-top: 15px;margin-bottom:15px;text-align: center;">
                    <a href="javascript:;" class="btn btn-enjoin" id="btnEnjoin">我要四海金融送我话费</a>
                </div>
            </div>
        </div>
        <form name="friendForm" id="friendForm">
            <input type="hidden" name="customid" value="${customId}"/>
            <input type="hidden" name="openid" value="${friendOpenId}"/>
            <input type="hidden" name="accountid" value="${accountId}"/>
            <input type="hidden" name="nickname" value="${itemnickname}"/>
            <input type="hidden" name="sex" value="${sex}"/>
            <input type="hidden" name="city" value="${city}"/>
            <input type="hidden" name="headimgurl" value="${headimgurl}"/>
            <input type="hidden" name="province" value="${province}"/>
        </form>
        <div class="friends">
            <h4 style="margin: 5px;font-weight: bold;color: #ffffff;text-align: center;">给力好友</h4>
            <div class="friendList">
                <ul>
                    <c:forEach items="${itemList}" var="item">
                        <li>
                            <img src="${item.headimgurl}">${fn:substring(item.nickname, 0, 10)}帮你筹了<span class="money">${item.money}</span>元
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="rule">
            <h4 style="margin: 5px;font-weight: bold;color: #ffffff;text-align: center;">四海金融4周年庆活动规则</h4>
            <ul>
                <li>1.活动时间2015.4.15至2015.4.17</li>
                <li>2.关注”四海金融”微信公众号,参与”赢话费”活动,参与活动即送10元话费</li>
                <li>3.邀请好友来帮忙赢取话费</li>
                <li>4.每人集满30元即可兑换话费,每人只限领取一次.共1000份,送完为止.</li>
                <li>5.将赢取的话费界面,手机号码通过公众号发送给我司,我司将在活动结束后的3天内给您充值</li>
                <li>6.本活动的最终解释权归四海集团所有,若发现通过不当手段刷话费,我方可选择不给予充值</li>
            </ul>
        </div>
        <div class="footer">
            <a href="javascript:;" class="btn btn-playLink">我要话费</a>
            <a href="http://eqxiu.com/s/8VpXl7ap?eqrcode=1&from=singlemessage&isappinstalled=0" class="btn btn-contactLink">四海集团</a>
        </div>
    </div>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">请输入你的联系方式</h4>
                </div>
                <div class="modal-body">
                    <form name="customInfo" id="customInfo" method="post" class="form-horizontal">
                        <input type="hidden" name="openid" value="${openId}">
                        <input type="hidden" name="accountid" value="${accountId}">
                        <input type="hidden" name="nickname" value="${nickname}">
                        <input type="hidden" name="sex" value="${sex}">
                        <input type="hidden" name="city" value="${city}">
                        <input type="hidden" name="headimgurl" value="${headimgurl}">
                        <input type="hidden" name="province" value="${province}">
                        <div class="alert alert-warning alert-dismissible fade in" style="margin-bottom: 10px;display: none;" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <strong id="errorInfo"></strong>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10">
                                <input type="text" id="mobile" name="mobile" class="form-control" style="width: 80%;height: 40px;" placeholder="请输入手机号码" maxlength="11">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" style="width: 50%;height: 40px;display: inline;" id="validcode" placeholder="验证码" maxlength="6">
                                <input type="button" id="validCodeBtn" value="获取验证码" class="btn btn-warning" style="height: 40px;margin-left: 10px;padding: 0px 10px 0px 10px;">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" id="submit" style="padding: 6px 15px;">提交</button>
                    <button type="button" class="btn btn-default" style="margin-left: 20px;" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="msgModalLabel">系统消息</h4>
                </div>
                <div class="modal-body" >

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="msgBtn">知道了</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="picModal" tabindex="-1" role="dialog"
          aria-labelledby="picModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 80%;text-align: center;">
            <div class="modal-content">
                <div class="modal-body" >
                    <img src="${ctxStatic}/images/wechat/sihai/erweima.png" width="100" height="100" b/>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="${ctxStatic}/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" ></script>
<script>
    $(document).ready(function(){
        var openId = "${openId}";
        var customId = "${customId}";
        if(customId==null || customId == ""){
            $(".notJoinDiv").show();
        }else{
            if("yes" == "${benren}"){
                $("#crowBtn").parent().hide();
                $("#shareBtn").parent().show();
            }else{
                $("#crowBtn").parent().show();
                $("#shareBtn").parent().hide();
            }
            $("#money").text("￥${money}");
            $(".progress-bar").css("width", "${overpro}%");
            $(".progress-bar").attr("aria-valuenow","${money}");
            $(".joinDiv").show();
            $(".notJoinDiv").hide();
        }

        $("#shareBtn").click(function(){
            openTip("四海金融","点击右上角按钮,选择\"分享到朋友圈\",这样朋友们就可以帮你赢话费了.","马上分享");
        });

        //参加活动
        $("#btnEnjoin").click(function(){
            $("#myModal").modal({
                backdrop:"static"
            });
        });

        //提交用户资料
        $("#submit").click(function(){
            var mobile = $("#mobile").val();
            if (!mobile) {
                info("亲爱的，手机号码忘填了");
                return false;
            }
            if (!(/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8]))\d{8}$/.test(mobile))) {
                info("亲爱的，手机号码格式不正确");
                return false;
            }
            var url = "${appctx}/idea/saveCustom";
            $.post(url,$("#customInfo").serialize(),function(data){
                $("#myModal").modal("hide");
                openTip("四海金融", data.msg,null,function(){
                    $("#msgModal").modal("hide");
                    $(".notJoinDiv").hide();
                    $(".joinDiv").show();
                    $("#crowBtn").parent().hide();
                    if(data.success){
                        $("#money").text("￥"+data.money);
                        $(".progress-bar").css("width", data.overpro + "%");
                        $(".progress-bar").attr("aria-valuenow",data.money);
                    }
                });
            });
        });

        //帮好友赢取
        $("#crowBtn").click(function(){
            $.post("${appctx}/idea/crowMobileFee",$("#friendForm").serialize(),function(data){
                openTip("四海金融", data.msg, null, function () {
                    $("#msgModal").modal("hide");
                    $(".joinDiv").show();
                    if(data.success){
                        $("#money").text("￥"+parseFloat(data.money).toFixed(2));
                        $(".progress-bar").css("width", data.overpro + "%");
                        $(".progress-bar").attr("aria-valuenow",data.money);
                    }
                });
            });
        });

        //我要参与活动
        $(".btn-playLink").click(function(){
            $("#picModal").modal();
        });
    });

    //表单验证消息
    function info(msg){
        $(".alert.alert-warning").text(msg).show();
    }

    //系统提示消息
    function openTip(title,msg,btnValue,func){
        btnValue = btnValue || "知道了";
        title = title || "系统消息";
        $("#msgModalLabel").text(title);
        $("#msgModal").find(".modal-body").text(msg);
        $("#msgBtn").text(btnValue);
        func = func || function(){
            $("#msgModal").modal("hide");
        };
        $("#msgModal").delegate("#msgBtn","click",func);
        $("#msgModal").modal();
    }

    //微信分享自定义
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "${appId}", // 必填，公众号的唯一标识
        timestamp: "${tikitMap.timestamp}", // 必填，生成签名的时间戳
        nonceStr: '${tikitMap.nonceStr}', // 必填，生成签名的随机串
        signature: '${tikitMap.signature}',// 必填，签名
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo'
        ] // 必填，需要使用的JS接口列表
    });

    //微信相关接口
    wx.ready(function(){
        //自定义分享
       wx.onMenuShareTimeline({
            title: '亲,快来四海金融帮${nickname}抢话费', // 分享标题
            link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${shareUrl}&response_type=code&scope=snsapi_userinfo&state=${openId}#wechat_redirect', // 分享链接
            imgUrl: '${origiheadimgurl}', // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
</script>
</html>
